<template>
  <div>
    <el-card class="searchLine">
      <el-form :inline="true" :model="userForm" style="margin-top:10px">
        <el-form-item label="用户id：">
          <el-input v-model="userForm.id" placeholder="请输入用户id" clearable />
        </el-form-item>
        <el-form-item label="用户账号：">
          <el-input v-model="userForm.name" placeholder="请输入用户账号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            查询
          </el-button>
          <el-button @click="onClear">
            清空
          </el-button>
          <el-button type="primary" icon="el-icon-plus" @click="addShop" />
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table
        :data="tableData"
        border
        style="width: 100%;"
        stripe
      >
        <el-table-column
          fixed
          prop="id"
          label="用户id"
          width="150"
        />
        <el-table-column
          prop="user_name"
          label="用户账号"
          width="200"
        />
        <el-table-column
          prop="password"
          label="用户密码"
        />

        <el-table-column
          fixed="right"
          label="操作"
          width="250"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">
              修改密码
            </el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">
              注销账号
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="sizes,prev, pager, next"
        :total="pager.total"
        :current-page="pager.pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pager.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog :title="subType? '新增用户':'修改密码'" :visible.sync="dialogFormVisible" :show-close="false"
               :close-on-click-modal="false"
    >
      <el-form ref="ruleForm" :model="addForm" label-width="120px"
               :rules="rules"
      >
        <el-form-item label="用户账号" prop="user_name">
          <el-input v-model="addForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="addForm.password" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">
          取 消
        </el-button>
        <el-button type="primary" @click="submitAddForm('ruleForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :title="'修改密码'" :visible.sync="editDialogForm" :show-close="false"
               :close-on-click-modal="false"
    >
      <el-form ref="editRuleForm" :model="editForm" label-width="120px"
               :rules="editRules"
      >
        <el-form-item label="用户账号" prop="user_name">
          <el-input v-model="editForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户旧密码" prop="oldPwd">
          <el-input v-model="editForm.oldPwd" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户新密码" prop="newPwd">
          <el-input v-model="editForm.newPwd" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetEditForm">
          取 消
        </el-button>
        <el-button type="primary" @click="submitEditForm('editRuleForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getUserList, addShop, deleteUser, editShop} from '@/api/user/index'
import {register, editPwd} from '@/api/activity/index'
const { createHmac, createDecipher } = require('crypto')

export default {
  data() {
    return {
      subType: true, // true表示add,false表示edit
      userForm: {
        name: '',
        id: ''
      },
      pager: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      dialogFormVisible: false,
      editDialogForm: false,
      addForm: {
        username: '',
        password: ''
      },
      editForm: {

      },
      rules: {
        user_name: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      editRules: {
        user_name: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        oldPwd: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.onLoad()
  },
  methods: {
    onSubmit() {
      this.onLoad()
    },
    onClear() {
      this.userForm = {
        name: '',
        id: ''
      }
      this.onLoad()
    },
    onLoad() {
      getUserList({
        ...this.userForm,
        pageNum: this.pager.pageNum,
        pageSize: this.pager.pageSize
      }).then(res => {
        let {list, total} = res.data
        this.tableData = list
        this.pager.total = total
      })
    },
    handleSizeChange(val) {
      this.pager.pageSize = val
      this.onLoad()
    },
    handleCurrentChange(val) {
      this.pager.pageNum = val
      this.onLoad()
    },
    addShop() {
      this.dialogFormVisible = true
      this.subType = true
    },
    submitAddForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.subType) {
            register(this.addForm).then(res => {
              console.log('新增addform', res)
              this.dialogFormVisible = false
              this.onLoad()
              this.resetForm('ruleForm')
            })
          }
          // else {
          //   editPwd(this.addForm).then(res => {
          //     console.log('编辑addform', res)
          //     this.dialogFormVisible = false
          //     this.onLoad()
          //     this.resetForm('ruleForm')
          //   })
          // }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields()
      this.addForm = {
        username: '',
        password: ''
      }
      this.dialogFormVisible = false
    },
    resetEditForm() {
      // this.$refs[formName].resetFields()
      this.editForm = {

      }
      this.editDialogForm = false
    },
    handleDelete(row) {
      let params = {id: row.id}
      deleteUser(params).then(res => {
        if (res.code === 10000) {
          this.$message.success('删除成功')
          this.onLoad()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    handleEdit(row) {
      console.log(row)
      this.editDialogForm = true
      this.editForm = {...row, username: row.user_name}
      // const jiemi=createDecipher('sha256','86e05b71b987c0c65808df9cfa14368c47fa7e4dd7ea68ad8936f01844040088')
    },
    submitEditForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const hash = createHmac('sha256', 'cmsSecret')
            .update(this.editForm.newPwd)
            .digest('hex')
          editPwd({...this.editForm, newPwd: hash}).then(res => {
            console.log('编辑editForm', res)
          })
          setTimeout(() => {
            this.editDialogForm = false
            this.onLoad()
            this.resetForm('ruleForm')
          }, 500)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.searchLine{
margin-bottom: 10px;
}
</style>
